<template>
    <AuthLayout>
      <div class="register-wrapper">
        <el-card class="register-card" shadow="always">
          <h2 class="register-title">欢迎注册</h2>
          <el-form :model="registerForm" label-width="100px" class="register-form">
            <el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
              <el-input
                v-model="registerForm.username"
                placeholder="请输入用户名"
                class="register-input"
                autofocus
              ></el-input>
            </el-form-item>
  
            <el-form-item label="邮箱" prop="email" :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
              <el-input
                v-model="registerForm.email"
                placeholder="请输入邮箱"
                class="register-input"
              ></el-input>
            </el-form-item>
  
            <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
              <el-input
                v-model="registerForm.password"
                type="password"
                placeholder="请输入密码"
                class="register-input"
              ></el-input>
            </el-form-item>
  
            <el-form-item label="确认密码" prop="confirmPassword" :rules="[{ required: true, message: '请确认密码', trigger: 'blur' }, { validator: validatePassword, trigger: 'blur' }]">
              <el-input
                v-model="registerForm.confirmPassword"
                type="password"
                placeholder="请确认密码"
                class="register-input"
              ></el-input>
            </el-form-item>
  
            <el-form-item class="form-actions">
              <el-button type="primary" class="register-btn" @click="register">注册</el-button>
              <el-button class="login-btn" @click="goLogin">已有账号？去登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </AuthLayout>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  import AuthLayout from '@/layouts/AuthLayout.vue';
  
  const registerForm = ref({
    username: '',
    email: '',
    password: '',
    confirmPassword: ''
  });
  
  const router = useRouter();
  
  const validatePassword = (rule, value, callback) => {
    if (value !== registerForm.value.password) {
      callback(new Error('两次输入的密码不一致'));
    } else {
      callback();
    }
  };
  
  const register = () => {
    if (!registerForm.value.username || !registerForm.value.email || !registerForm.value.password || !registerForm.value.confirmPassword) {
      ElMessage.error('请填写完整的注册信息');
      return;
    }
  
    ElMessage.success('注册成功');
    router.push({ name: 'HomePage' });
  };
  
  const goLogin = () => {
    router.push({ name: 'LoginPage' });
  };
  </script>
  
  <style scoped>
  .register-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 满屏高度 */
    padding: 0 0px;
    background-image: url('../assets/bg2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .register-card {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.5); /* 背景色带透明度 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
  }
  
  .register-title {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
  }
  
  .register-input {
    background-color: rgba(255, 255, 255, 0.6);
  }
  
  .form-actions {
    display: flex;
    justify-content: space-between;
  }
  </style>
  